<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>KMUTT_Dashboard</title>

<!-- main library start-->
<script src="../../libraryChart/jqplot/jquery.js"></script>
<script src="../../libraryChart/jqplot/jquery.jqplot.min.js" type="text/javascript" language="javascript"></script>
<link href="../../libraryChart/jqplot/jquery.jqplot.min.css" type="text/css" rel="stylesheet"/>
<link href="../../libraryChart/jquery-jvectormap/jquery-jvectormap-1.2.2.css" type="text/css" rel="stylesheet"/>
<script src="../../libraryChart/jquery-jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="../../libraryChart/bootsrap/js/bootstrap.min.js"></script>
<link href="../../libraryChart/kendoCommercial/styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../libraryChart/kendoCommercial/styles/kendo.default.min.css" rel="stylesheet" />
<script src="../../libraryChart/kendoCommercial/js/kendo.all.min.js"></script>
<!-- main library end-->

<!--  library  chart start -->
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.barRenderer.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.categoryAxisRenderer.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.pointLabels.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.meterGaugeRenderer.min.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.mekkoRenderer.min.js"></script>
<script type="text/javascript" src="../../libraryChart/jquery-jvectormap/jquery-jvectormap-th_regions-mill-en.js"></script>
<script type="text/javascript" src="../../libraryChart/jquery-jvectormap/jquery-jvectormap-th-mill-th.js"></script>
<script type="text/javascript" src="../../libraryChart/jquery-jvectormap/jquery-jvectormap-th-region-mill-th.js"></script>
<script type="text/javascript" src="../../libraryChart/jquery-jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.highlighter.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.euroFormatter.js"></script>
<script type="text/javascript" src="../../libraryChart/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<!--  library  chart start -->

<!--  library function chart start -->
<script type="text/javascript" src="../../Controller/initial.js"></script> 
<script type="text/javascript" src="../../Controller/barChart.js"></script> 
<script type="text/javascript" src="../../Controller/barChartHorizontal.js"></script>
<script type="text/javascript" src="../../Controller/donutChart.js"></script>
<script type="text/javascript" src="../../Controller/lineChart.js"></script>
<script type="text/javascript" src="../../Controller/pieChart.js"></script>
<script type="text/javascript" src="../../Controller/barLineChart.js"></script>
<script type="text/javascript" src="../../Controller/gaugeChart.js"></script>
<script type="text/javascript" src="../../Controller/map.js"></script>
<script type="text/javascript" src="../../Controller/table.js"></script>
<script type="text/javascript" src="../../Controller/mainJs.js"></script>
<script type="text/javascript" src="../../Controller/BarLineChart_A.js"></script>
<script type="text/javascript" src="../../Controller/stackLineChart.js"></script>

<!--  library function chart end -->
<style>
	#tabs{
		font-size:13px;
	}	
</style>
    
	<!-- <script src="../../js/jquery.min.js"> </script>  -->
	<link href="../../Css/Employee/main.css" rel="stylesheet" type="text/css">
	<link href="../../jquery-ui/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css">
	<!-- <script src="../../jquery-ui/js/jquery-1.10.2.js"></script>  -->
	<script src="../../jquery-ui/js/jquery-ui-1.10.4.custom.min.js"></script>
	
<!-- call Controller main Start -->
	<script src="../../Controller/Employee/main.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_status.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_education.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_position.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_foreign.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_inbound_outbound.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_studyleave.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_studyleave_education.js"> </script>
	<script src="../../Controller/Employee/cp_all_employee_by_level.js"> </script>
<!-- call Controller main END -->



</head>
<body>
	<div id="body">
	<form id="formAction">
		<div id="Param">
			<div id = info>
  			 <img id="logo" src="../../images/Kmutt.png">
			</div>
			<div id = "ParamLeft">
			
				<div id = ParamLeft1>
					ระบบสารสนเทศออนไลน์
				</div>
				
				<div id = ParamLeft2>
				<div id = "EmpParamTypeYear" class = "ParamLeftSub">
					<div class = "ParamTitle">ประเภทปี</div>
					<div class = "ParamSubTitle" id = "emp_paramTypeYearList"></div>
				</div>
				
				<div id = "EmpParamYear" class = "ParamLeftSub">
					<div class = "ParamTitle">ปี	</div>
					<div class = "ParamSubTitle" id = "emp_paramYearList"></div>
				</div>
				
				<div id = "EmpParamPos" class = "ParamLeftSub">
					<div class = "ParamTitle">กลุ่มของตำแหน่งงาน</div>
					<div class = "ParamSubTitle" id = "emp_paramPosList"></div>
				</div>
				
				<div id = "EmpParamTypeLine" class = "ParamLeftSub">
					<div class = "ParamTitle">สภานภาพ</div>
					<div class = "ParamSubTitle" id = "emp_paramTypeLineList"></div>
				</div>
				
				<div id = "EmpParamPosIsm" class = "ParamLeftSub">
					<div class = "ParamTitle">กลุ่มของตำแหน่งงาน</div>
					<div class = "ParamSubTitle" id = "emp_paramPosIsmList"></div>
				</div>
				
				<div id = "EmpParamTypeLineIsm" class = "ParamLeftSub">
					<div class = "ParamTitle">สภานภาพ</div>
					<div class = "ParamSubTitle" id = "emp_paramTypeLineIsmList"></div>
				</div>
				
				<div id = "EmpParamEdu" class = "ParamLeftSub">
					<div class = "ParamTitle">ระดับที่ลาศึกษาต่อ</div>
					<div class = "ParamSubTitle" id = "emp_paramEduList"></div>
				</div>
				
				<div id = "EmpParamBou" class = "ParamLeftSub">
					<div class = "ParamTitle">ประเภทการลา</div>
					<div class = "ParamSubTitle" id = "emp_paramBouList"></div>
				</div>
				
				<div id = "EmpParamEmpTypeGroup" class = "ParamLeftSub">
					<div class = "ParamTitle">กลุ่มของตำแหน่งงาน</div>
					<div class = "ParamSubTitle" id = "emp_paramEmpTypeGroupList"></div>
				</div>
				
				<div id = "EmpParamEmpTypeLine" class = "ParamLeftSub">
					<div class = "ParamTitle">สภานภาพ</div>
					<div class = "ParamSubTitle" id = "emp_paramEmpTypeLineList"></div>
				</div>
				
				<div id = "EmpParamDep" class = "ParamLeftSub">
					<div class = "ParamTitle">หน่วยงาน/คณะ</div>
					<div class = "ParamSubTitle" id = "emp_paramDepList"></div>
				</div>
				
				<div id = "EmpParamYearSub" class = "ParamLeftSub">
					<div class = "ParamTitle">จำนวนปีย้อนหลัง</div>
					<div class = "ParamSubTitle">
					 <select id="emp_paramSize">
              			<option>5</option>
               			<option>4</option>
                		<option>3</option>
               		</select>
               		</div>
				</div>
			</div>
			</div>
				
			<div id = "ParamRight">		
				<div id = "kmutt">
					<img id="logo" src="../../images/kmutt.jpg">
				</div>
				<div id="submit"> 
					<input type="submit" id="btnSubmit" name="btnSubmit" value="เรียกดูข้อมูล"  style="height:30px; width:auto; text-align:center" >
				</div>
			</div>
		</div>
	</form>
		<div id="maincontent">
			<div id="tabs">
				<ul>
					<li><a href="#tabs-1">จำนวนบุคลากรทั้งหมด จำแนกตามสถานภาพ</a></li>
					<li><a href="#tabs-2">จำนวนบุคลากรทั้งหมด จำแนกตามวุฒิการศึกษา</a></li>
					<li><a href="#tabs-3">จำนวนบุคลากรสายวิชาการ จำแนกตามตำแหน่งวิชาการ</a></li>
					<li><a href="#tabs-4">จำนวนบุคลากรชาวต่างประเทศ</a></li>
					<li><a href="#tabs-5">จำนวนบุคลากร Inbound / Outbound</a></li>
					<li><a href="#tabs-6">จำนวนบุคลากรที่ลาศึกษาต่อ</a></li>
					<li><a href="#tabs-7">จำนวนบุคลากรที่ลาศึกษาต่อ จำแนกตามระดับที่ศึกษาต่อ</a></li>
					<li><a href="#tabs-8">จำนวนบุคลากรจำแนกตามระดับ</a></li>
				</ul>
			<div id="tabs-1"></div>			
			<div id="tabs-2"></div>
			<div id="tabs-3"></div>
			<div id="tabs-4"></div>
			<div id="tabs-5"></div>
			<div id="tabs-6"></div>
			<div id="tabs-7"></div>
			<div id="tabs-8"></div>
			</div>
		</div>
	</div>
</body>
</html>